<template>
<div>
    <el-col span="4">
        <el-input
        placeholder="请输入内容"
        v-model.trim="searchMsg"
        v-on:input="fetchOrder">
        <i slot="prefix" class="el-input__icon el-icon-search" id="search_input"></i>
        </el-input>
    </el-col>
    <el-col span="12">
    <div>
        <el-radio-group v-model="status" @change="radioGroupChange()">
        <el-radio-button label="-99">全部</el-radio-button>
        <el-radio-button label="-1">退款申请</el-radio-button>
        <el-radio-button label="-2">已退款</el-radio-button>
        <el-radio-button label="0">未支付</el-radio-button>
        <el-radio-button label="1">未发货</el-radio-button>
        <el-radio-button label="2">已发货</el-radio-button>
        <el-radio-button label="3">已收货</el-radio-button>
        </el-radio-group>
    </div>
    </el-col>

    <el-table
    stripe
    v-loading="loading"
    ref="multipleTable"
    :data="orders"
    tooltip-effect="dark"
    style="width: 100%"
    height="550"
    @selection-change="handleSelectionChange"
    >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="orderid" label="订单号" sortable width="120">
      <!-- <template slot-scope="scope">{{ scope.row.id }}</template> -->
    </el-table-column>
    <el-table-column prop="totle_price" label="总价格" sortable width="120">
    </el-table-column>
    <el-table-column prop="num" label="数量" sortable width="120"></el-table-column>
    <el-table-column label="状态" sortable>
        <template slot-scope="scope">
            <span v-if="scope.row.status==-2">退单完成</span>
            <span v-if="scope.row.status==-1">退单申请中</span>
            <span v-if="scope.row.status==0">未付款</span>
            <span v-if="scope.row.status==1">未发货</span>
            <span v-if="scope.row.status==2">已发货</span>
            <span v-if="scope.row.status==3">已收货</span>
        </template>
    </el-table-column>
    <el-table-column prop="reason" label="理由" sortable width="120"></el-table-column>
    <el-table-column
        fixed="right"
        label="操作"
        width="300">
        <template slot-scope="scope">
            <el-button size="mini" v-if="scope.row.status==1" @click="deliverClick(scope.row)">发货</el-button>
            <el-button size="mini" v-if="scope.row.status==-1" @click="backBillClick(scope.row)">退单理由查看</el-button>
            <el-button size="mini" v-if="scope.row.status!=0 && scope.row.status!=-2" @click="backBillClick(scope.row)">退单</el-button>
            <el-button size="mini" @click.native.stop="editButtonClick(scope.$index)">查看详情</el-button>
        </template>
    </el-table-column>
  </el-table>

  
   <el-dialog title="订单详情" :visible.sync="dialogFormVisible">
        <el-descriptions title="买家信息">
            <el-descriptions-item label="用户名">{{s_user.username}}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{s_user.phone}}</el-descriptions-item>
            <el-descriptions-item label="居住地">{{s_user.address}}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="商品信息">
            <el-descriptions-item label="商品名">{{s_goods.name}}</el-descriptions-item>
            <el-descriptions-item label="图片"><el-image :src="s_goods.picaddress"></el-image></el-descriptions-item>
            <el-descriptions-item label="库存">{{s_goods.num}}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="收货地址">
            <el-descriptions-item label="地址">{{s_address.address}}</el-descriptions-item>
            <el-descriptions-item label="电话">{{s_address.phone}}</el-descriptions-item>
            <el-descriptions-item label="收货人">{{s_address.name}}</el-descriptions-item>
        </el-descriptions>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editShop()">确 定</el-button>
        </div>
    </el-dialog>


    <el-dialog title="退单申请" :visible.sync="dialogFormVisible_2">
        <el-descriptions title="用户退单理由">
            <el-descriptions-item label="理由">{{s_order.reason}}</el-descriptions-item>
        </el-descriptions>
        <el-input placeholder="请输入理由" v-model="input1">
            <template slot="prepend">请输入你的意见</template>
        </el-input>
    
        <div slot="footer" class="dialog-footer">
          <el-button @click="changeStatus(-2)">通过</el-button>
          <el-button type="primary" @click="changeStatus(3)">不通过</el-button>
        </div>
    </el-dialog>

    
    <el-dialog title="发货" :visible.sync="dialogFormVisible_3">
          <el-input placeholder="请输入快递单号" v-model="input">
            <template slot="prepend">快递单号</template>
        </el-input>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible_3 = false">取消</el-button>
          <el-button type="primary" @click="changeStatus(2)" >确定</el-button>
        </div>
    </el-dialog>

<el-row>
  <div class="block">
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="10"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</el-row>


</div>
</template>

<script>
export default {
    name:"orderList",
    data(){
        return{
            input:'',
            input1:'',

            searchMsg:'',
            orders:[],
            goods:[],
            address:[],
            users:[],
            goods:[],

            s_goods:{},
            s_address:{},
            s_user:{},
            s_order:{},

            currentPage:1,
            loading:true,
            total:0,
            index:0,
            dialogFormVisible:false,
            dialogFormVisible_2:false,
            dialogFormVisible_3:false,


            status:-99,
        }
    },
    mounted(){
        this.getOrderList()
    },
    methods:{
        getOrderList(){
            this.loading = true
            this.$axios.get('/listOrder',{
                params:{
                    currentPage:this.currentPage,
                    status:this.status
                }
            }).then(resp =>{
                if(resp && resp.status === 200){
                    this.orders = resp.data.data1
                    console.log(this.orders)
                    this.total = resp.data.total
                    console.log(this.total)
                    this.goods = resp.data.data2
                    console.log(this.goods)
                    this.users = resp.data.data4
                    console.log(this.users)
                    this.address = resp.data.data3
                    console.log(this.address)
                    this.loading=false
                    
                }
            })
        },

        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(this.multipleSelection);
        },
        deleteSelect(){
          for(let item of this.multipleSelection){
            this.deleteShop(item)
          }
        },
        handleCurrentChange(val) {
            if(this.currentPage!=val){
              this.currentPage = val;
              this.getOrderList()
            }
        },
        editButtonClick(index){
            this.dialogFormVisible = true
            this.s_goods = this.goods[index]
            this.s_address = this.address[index]
            this.s_user = this.users[index]
        },
        radioGroupChange(){
            this.getOrderList()
        },
        changeStatus(status){
            this.s_order.status = status
            this.s_order.reason = this.input1
            console.log(this.s_order)
            this.$axios.post('changeStatus',this.s_order).then(resp=>{
                if(resp.status==200){
                    this.$message.success("成功")
                    this.dialogFormVisible = false
                    this.dialogFormVisible_2 = false
                    this.dialogFormVisible_3 = false
                    this.getOrderList()
                }else{
                    this.$message.error("错误")
                }
            })
        },

        backBillClick(order){
            this.dialogFormVisible_2 = true
            this.s_order = order
        },
        deliverClick(order){
            this.dialogFormVisible_3 = true
            this.s_order = order
        }
    }
}
</script>

<style>

</style>